<template>
  <view class="content">
    <view class="contentbox" :style="'height:'+headHeight+'px;'" @click="goBack">
      <view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
        <image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
        <view>电子发票</view>
      </view>
    </view>
    <image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
    <view class="head-con" v-if="false">
      <view class="names" v-if="false">请选择开票车牌号码</view>
      <view class="down-con">
        <view class="number">
          <view>{{ hasOrderPlate[0] }}</view>
          <image :src="imageUrl +'success.png'" mode="widthFix" v-if="false"></image>
        </view>
        <image :src="imageUrl +'left4.png'" mode="widthFix" class="next-img" v-if="false"></image>
      </view>
    </view>
    <view class="big-box">
      <view class="list-name">开票类型</view>
      <view class="more-box top30">
        <view class="list-more"
              @click="goNext('/pages/selectMoney/selectMoney?type=road_fee&plate=' + hasOrderPlate[0])">
          <image :src="imageUrl +'sw1.png'" mode="widthFix" class="next-img"></image>
          <view>道路停车</view>
        </view>
        <view class="list-more"
              @click="goNext('/pages/selectMoney/selectMoney?type=park_fee&plate=' + hasOrderPlate[0])">
          <image :src="imageUrl +'sw2.png'" mode="widthFix" class="next-img"></image>
          <view>公共停车场</view>
        </view>
        <view class="list-more" style="visibility: hidden;" v-if="false"
              @click="goNext('/pages/selectMoney/selectMoney?type=arrear&plate=' + hasOrderPlate[0])">
          <image :src="imageUrl +'sw4.png'" mode="widthFix" class="next-img"></image>
          <view>补缴订单</view>
        </view>
        <view class="list-more"
              @click="goNext('/pages/selectMoney/selectMoney?type=plate_renew&plate=' + hasOrderPlate[0])">
          <image :src="imageUrl +'sw3.png'" mode="widthFix" class="next-img"></image>
          <view>包月订单</view>
        </view>
        <view class="list-more" style="visibility: hidden;">
          <image :src="imageUrl +'sw4.png'" mode="widthFix" class="next-img"></image>
          <view>停车场包月</view>
        </view>
      </view>
      <view class="list-name top60">发票服务</view>
      <view class="more-box top30">
        <view class="list-more" @click="goNext('/pages/invoiceHistory/invoiceHistory')">
          <image :src="imageUrl +'sw5.png'" mode="widthFix" class="next-img"></image>
          <view>开票历史</view>
        </view>
        <view class="list-more" @click="goNext('/pages/myInvoice/myInvoice')">
          <image :src="imageUrl +'sw6.png'" mode="widthFix" class="next-img"></image>
          <view>发票抬头</view>
        </view>
        <view class="list-more" style="visibility: hidden;">
          <image :src="imageUrl +'sw7.png'" mode="widthFix" class="next-img"></image>
          <view>开票帮助</view>
        </view>
        <view class="list-more"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {get} from "../../api/myHttps";

export default {
  data() {
    return {
      headHeight: 0,
      navBarHeight: 0,
      imageTop: 0,
      right: 0,

      platesNums: [],
      hasOrderPlate: [],
    }
  },
  onLoad() {
    // 获取胶囊按钮位置
    // 获取系统信息（主要是状态栏高度）
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    const systemInfo = uni.getSystemInfoSync();

    // 计算顶部总高度：从屏幕顶部到导航栏底部的距离
    const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
    const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

    console.log('状态栏高度:', statusBarHeight);
    console.log('胶囊按钮信息:', menuButtonInfo);
    console.log('导航栏高度:', navBarHeight);
    console.log('顶部总高度:', totalTopHeight);
    this.headHeight = totalTopHeight
    this.navBarHeight = menuButtonInfo.height
    this.imageTop = menuButtonInfo.top
    this.right = menuButtonInfo.width + 20

    this.getPlates();
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    goNext(uri) {
      uni.navigateTo({
        url: uri
      })
    },
    getPlates() {
      // 获取车牌
      let ownerId = uni.getStorageSync("ownerId");
      get('/city-mobile/plate/bindPlate/' + ownerId).then((res) => {
        this.platesNums = res;
        this.platesNums.forEach((item, index) => {
          if (this.hasOrderPlate.indexOf(item.plate) < 0) {
            this.hasOrderPlate.push(item.plate);
          }
        });
        if (this.platesNums.length == 0) {
          this.platesNums = [];
        }
      })
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #F4FAF7;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bg-img {
  width: 750rpx;
  height: 520rpx;
  position: absolute;
  top: 0;
}

.contentbox {
  width: 750rpx;
  position: relative;
  z-index: 999;

  .container {
    width: 750rpx;
    position: absolute;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    height: 86rpx;

    .title-names {
      width: 750rpx;
      position: absolute;
      text-align: center;
    }

    .logo {
      margin-left: 18rpx;
      width: 40rpx;
      height: 40rpx;
      position: relative;
      z-index: 9999;
    }

    view {
      margin-left: 22rpx;
      font-size: 36rpx;
      color: #1C274C;
    }

    .seandcode {
      width: 64rpx;
      height: 64rpx;
      position: relative;
      z-index: 9999;
    }
  }
}

.head-con {
  width: 690rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  padding: 20rpx 0;
  position: relative;

  .names {
    margin-left: 20rpx;
    line-height: 48rpx;
    color: rgba(28, 39, 76, 0.60);
    font-size: 28rpx;
  }

  .down-con {
    width: 650rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 0;
    margin-top: 20rpx;

    .number {
      display: flex;
      align-items: center;

      view {
        font-size: 36rpx;
        color: #1C274C;
        font-weight: 600;
      }

      image {
        width: 110rpx;
        height: 32rpx;
        margin-left: 10rpx;
      }
    }

    .next-img {
      width: 16rpx;
      height: 16rpx;
    }
  }
}

.big-box {
  width: 690rpx;
  background-color: #fff;
  margin-top: 20rpx;
  border-radius: 20rpx;
  padding-top: 20rpx;
  padding-bottom: 30rpx;
  position: relative;

  .list-name {
    width: 650rpx;
    margin-left: 20rpx;
    line-height: 48rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #1C274C;
  }

  .top60 {
    margin-top: 60rpx;
  }

  .more-box {
    width: 650rpx;
    margin-left: 20rpx;
    display: flex;
    justify-content: space-between;

    .list-more {
      width: 120rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      image {
        width: 64rpx;
        height: 64rpx;
      }

      view {
        width: 100%;
        text-align: center;
        font-size: 24rpx;
        margin-top: 13rpx;
        line-height: 36rpx;
      }
    }
  }

  .top30 {
    margin-top: 30rpx;
  }
}
</style>
